<!--
 描述: 仪表盘
 作者: Jack Chen
 日期: 2020-05-03
-->

<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content">
      <div class="sn-title">销售目标达成情况(亿元)</div>
      <div class="sn-body">
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_gauge"></div> 
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
export default {
  name: "gauge",
  data() {
    return {
      option: {
        tooltip: {
          formatter: "{a} <br/>{c}亿元"
        },
        toolbox: {
          show: false,
          feature: {
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series : [
          {
            name: '完成情况',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 3600,
            splitNumber: 5,
            radius: '60%',
            axisLine: {            // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [0.09, 'lime'],
                  [0.82, '#1e90ff'],
                  [1, '#ff4500']
                ],
                width: 3,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }

            },
            axisTick: {            // 坐标轴小标记
              length: 15,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: {           // 分隔线
              length: 20,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              backgroundColor: 'auto',
              borderRadius: 2,
              color: '#eee',
              padding: 3,
              textShadowBlur: 2,
              textShadowOffsetX: 1,
              textShadowOffsetY: 1,
              textShadowColor: '#222'
            },
            title: {
              offsetCenter: [0, '-30%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              // formatter: function (value) {
              //   value = (value + '').split('.');
              //   value.length < 2 && (value.push('00'));
              //   return ('00' + value[0]).slice(-2)
              //           + '.' + (value[1] + '00').slice(0, 2);
              // },
              offsetCenter: ['4%', '70%'],
              fontFamily: 'Arial',
              color: '#eee',
              fontSize:20,
            },
            data: [{value: 2314.4, name: '年度目标'}]
          },
          {
            name: '完成情况',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 900,
            splitNumber: 5,
            radius: '45%',
            center: ['18%', '50%'],
            axisLine: {            // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [0.09, 'lime'],
                  [0.82, '#1e90ff'],
                  [1, '#ff4500']
                ],
                width: 3,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: {            // 坐标轴小标记
              length: 10,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: {           // 分隔线
              length: 15,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              backgroundColor: 'auto',
              borderRadius: 2,
              color: '#eee',
              padding: 3,
              textShadowBlur: 2,
              textShadowOffsetX: 1,
              textShadowOffsetY: 1,
              textShadowColor: '#222'
            },
            title: {
              offsetCenter: [0, '-20%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize:13,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              // formatter: function (value) {
              //   value = (value + '').split('.');
              //   value.length < 2 && (value.push('00'));
              //   return ('00' + value[0]).slice(-2)
              //           + '.' + (value[1] + '00').slice(0, 2);
              // },
              offsetCenter: ['4%', '80%'],
              fontFamily: 'Arial',
              color: '#eee',
              fontSize:20,
            },
            data: [{value: 771.47, name: '季度目标'}]
          },
          {
            name: '完成情况',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 300,
            splitNumber: 5,
            radius: '45%',
            center: ['82%', '50%'],
            axisLine: {            // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [0.09, 'lime'],
                  [0.82, '#1e90ff'],
                  [1, '#ff4500']
                ],
                width: 3,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: {            // 坐标轴小标记
              length: 10,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: {           // 分隔线
              length: 15,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              backgroundColor: 'auto',
              borderRadius: 2,
              color: '#eee',
              padding: 3,
              textShadowBlur: 2,
              textShadowOffsetX: 1,
              textShadowOffsetY: 1,
              textShadowColor: '#222'
            },
            title: {
              offsetCenter: [0, '-20%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize:13,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              // formatter: function (value) {
              //   value = (value + '').split('.');
              //   value.length < 2 && (value.push('00'));
              //   return ('00' + value[0]).slice(-2)
              //           + '.' + (value[1] + '00').slice(0, 2);
              // },
              offsetCenter: ['4%', '80%'],
              fontFamily: 'Arial',
              color: '#eee',
              fontSize:20,
            },
            data: [{value: 150, name: '月度目标'}]
          }
        ]
      },
      timer: null
    }
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_gauge'));

      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 1270px;
  top: 1140px;
  width: 600px;
  height: 400px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>
